<template>
  <!-- 告警规则 - 对象告警 -->
  <div>
    <!-- 搜索 -->
    <div class="search-area">
      <div class="form">
        <el-form
          :model="listQuery"
          ref="listQuery"
          size="small"
          :inline="true"
          label-width="125px"
        >
          <el-form-item :label="$t('巡检对象名称2') + ':'" prop="deviceName">
            <el-input
              v-model="listQuery.deviceName"
              :placeholder="$t('请输入')"
              clearable
              size="medium"
            />
          </el-form-item>
          <el-form-item :label="$t('巡检点名称') + ':'" prop="viewPointName">
            <el-input
              v-model="listQuery.viewPointName"
              :placeholder="$t('请输入')"
              clearable
              size="medium"
            />
          </el-form-item>
          <el-form-item
            :label="$t('巡检对象类型2') + '：'"
            prop="deviceType"
            label-width="115px"
          >
            <el-select
              size="medium"
              v-model="listQuery.deviceType"
              :placeholder="$t('请选择')"
            >
              <el-option :label="$t('全部')" value=""></el-option>
              <el-option :label="$t('实体')" value="1"></el-option>
              <el-option :label="$t('虚拟')" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('识别类型') + ':'"
            prop="identifyType"
            label-width="115px"
          >
            <el-select
              v-model="listQuery.identifyType"
              :placeholder="$t('请选择')"
              clearable
              size="medium"
            >
              <el-option :label="$t('全部')" value=""></el-option>
              <el-option
                v-for="dict in dict.type.recognition"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('数据类型') + '：'" prop="dataType">
            <el-select
              v-model="listQuery.dataType"
              :placeholder="$t('请选择')"
              clearable
              size="medium"
            >
              <el-option :label="$t('全部')" value=""></el-option>
              <el-option :label="$t('数值')" value="0"></el-option>
              <el-option :label="$t('枚举')" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="search-area-btn" style="width: 300px; padding: 0 10px">
        <div
          @click="serachBtn"
          class="serch-btn cursor-pointer"
          v-hasPermi="['task:alarmrules:search']"
        >
          {{ $t("搜索") }}
        </div>
        <div
          @click="resetFormBtn()"
          class="reset-btn cursor-pointer"
          style="margin: 0 8px"
          v-hasPermi="['task:alarmrules:reset']"
        >
          {{ $t("重置") }}
        </div>
        <div
          @click="batchSettingBtn"
          class="serch-btn cursor-pointer"
          v-hasPermi="['task:alarmrules:batchsetting']"
        >
          {{ $t("批量设置") }}
        </div>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <el-row>
        <el-col
          :span="6"
          :xs="24"
          class="first-col"
          :style="{ height: enumType == 0 ? '818px' : '718px' }"
        >
          <el-input
            v-model="objTreeInput"
            :placeholder="$t('搜索')"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
          <el-tree
            :data="deptOptions"
            node-key="treeId"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            show-checkbox
            ref="objTreeRef"
            class="scroll-hidden"
            default-expand-all
            @node-click="nodeClick($event)"
          >
            <span
              slot-scope="{ node, data }"
              style="display: inline-block; width: 60%"
              :style="
                data.treeId == currentTreeId
                  ? 'background-color:rgba(0, 209, 255, 0.2)'
                  : ''
              "
            >
              <img
                :src="icons[data.iconType]"
                style="width: 16px; height: 16px"
              />
              <el-tooltip
                class="item"
                effect="dark"
                :content="data.name"
                placement="right"
              >
                <span
                  style="margin-left: 10px"
                  :style="{
                    color:
                      data.type == '2' && data.isParam == '0'
                        ? '#FF5562'
                        : '#FFFFFF',
                  }"
                  :title="data.name"
                  >{{ data.name | handleCtx("15") }}</span
                >
              </el-tooltip>
            </span>
          </el-tree>
        </el-col>
        <el-col :span="8" :xs="24" class="second-col">
          <el-row class="header-row">
            <el-col :span="24">
              <div class="block-info">
                <div class="tabs">
                  <div
                    :class="[currentTab == '1' ? 'current-tab' : 'camero']"
                    @click="tabClick('1')"
                  >
                    {{ $t("可见光") }}
                  </div>
                  <div
                    :class="[currentTab == '2' ? 'current-tab' : 'camero']"
                    @click="tabClick('2')"
                  >
                    {{ $t("热成像") }}
                  </div>
                  <!-- <div
                    :class="[currentTab == '3' ? 'current-tab' : 'camero']"
                    @click="tabClick('3')"
                  >
                    音频
                  </div>
                  <div
                    :class="[currentTab == '4' ? 'current-tab' : 'camero']"
                    @click="tabClick('4')"
                  >
                    局放
                  </div>
                  <div
                    :class="[currentTab == '5' ? 'current-tab' : 'camero']"
                    @click="tabClick('5')"
                  >
                    遥测
                  </div> -->
                </div>
                <div class="img-box">
                  <canvas ref="canvasImg" class="canvasImg" id="canvasImg">
                    {{ $t(" 浏览器版本过低，请去下载最新版本浏览器") }}
                  </canvas>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="obj-calib">
            <div class="title">{{ $t("对象参数") }}</div>
            <div class="info-row" style="margin-top: 16px">
              <div class="info-title">
                {{ $t("关联巡检点") }}
              </div>
              <div class="info-content">
                {{ nodeItem.viewPointName || $t("无") }}
              </div>
            </div>
            <div class="info-row">
              <div class="info-title">{{ $t("对象名称") }}：</div>
              <div class="info-content">
                {{ nodeItem.deviceName || $t("无") }}
              </div>
            </div>
            <div class="info-row">
              <div class="info-title">{{ $t("对象类型") }}</div>
              <div class="info-content">
                {{ nodeItem.deviceType || $t("无") }}
              </div>
            </div>
            <div class="info-row">
              <div class="info-title">
                {{ $t("识别类型") + "：" }}
              </div>
              <div class="info-content">
                {{ nodeItem.identifyTypeName || $t("无") }}
              </div>
            </div>
            <div class="info-row">
              <div class="info-title">{{ $t("备注") + "：" }}</div>
              <div class="info-content">{{ $t("暂无") }}</div>
            </div>
          </el-row>
          <el-row class="obj-calib">
            <div class="title">{{ $t("标定信息") }}</div>
            <el-row>
              <el-col :span="11">
                <div class="info-row" style="margin-top: 16px">
                  <div class="info-title">{{ $t("标定编号") }}</div>
                  <div class="info-content">
                    {{ nodeItem.calibrationId || $t("无") }}
                  </div>
                </div>
                <div class="info-row">
                  <div class="info-title">{{ $t("标定类型") }}：</div>
                  <div class="info-content">
                    {{ nodeItem.calibrationTypeName || $t("无") }}
                  </div>
                </div>
                <div class="info-row">
                  <div class="info-title">{{ $t("数据类型") + "：" }}</div>
                  <div class="info-content">
                    <el-radio-group
                      v-model="enumType"
                      disabled
                      style="display: flex; width: 126px; align-items: center"
                    >
                      <el-radio label="0">{{ $t("数值") }}</el-radio>
                      <el-radio label="1">{{ $t("枚举") }}</el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <template v-if="enumType == '0'">
                  <div class="info-row">
                    <div class="info-title">{{ $t("仪表里程") }}</div>
                    <div class="info-content">
                      {{ `${minNums} -${maxNums} ` }}
                    </div>
                  </div>
                  <div class="info-row">
                    <div class="info-title">{{ $t("单位") + "：" }}</div>
                    <div class="info-content">
                      {{ nodeItem.unit || $t("无") }}
                    </div>
                  </div>
                </template>
              </el-col>
              <el-col :span="13" v-if="enumType == '1'">
                <div class="info-row">
                  <div class="info-title">{{ $t("枚举值") + "：" }}</div>
                  <div class="info-content">
                    <el-table :data="alarmSelectData" height="140">
                      <el-table-column
                        prop="enumValue"
                        :label="$t('枚举名称')"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        prop="enumNumber"
                        :label="$t('枚举值')"
                        align="center"
                      ></el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-row class="second-row">
            <div class="title">{{ $t("单点告警规则") }}</div>
            <el-form
              inline
              :model="alarmForm"
              ref="alarmRef"
              :rules="alarmRules"
              size="small"
              label-width="128px"
              label-position="right"
            >
              <el-form-item :label="$t('设置方式')" required>
                <el-radio-group
                  v-model="alarmForm.setType"
                  style="margin-left: 10px"
                >
                  <el-radio label="1">{{ $t("自定义") }}</el-radio>
                  <el-radio label="2" disabled>{{ $t("选择模板") }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 数值常规 -->
              <div v-if="enumType == '0'">
                <el-form-item :label="$t('告警等级') + '：'">
                  <el-select
                    v-model="alarmForm.alarmLevel"
                    :placeholder="$t('请选择')"
                    clearable
                    size="mini"
                    disabled
                    style="width: 120px"
                  >
                    <el-option
                      v-for="dict in alarmLevelList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select
                    v-model="alarmForm.alarmKey"
                    :placeholder="$t('请选择')"
                    clearable
                    size="mini"
                    style="width: 94px; margin: 0 8px"
                    @change="alarmKyeChange"
                  >
                    <el-option
                      v-for="dict in symbolList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="showOne"
                  prop="threValue"
                  :rules="
                    enumType == '0' &&
                    alarmForm.alarmKey !== '5' &&
                    alarmForm.alarmKey !== '6'
                      ? alarmRules.threValue
                      : []
                  "
                >
                  <el-input
                    v-model="alarmForm.threValue"
                    :placeholder="$t('阈值')"
                    clearable
                    size="mini"
                    style="width: 100px"
                  />
                </el-form-item>
                <template v-if="!showOne">
                  <el-form-item
                    prop="topThreValue"
                    :rules="
                      enumType == '0' &&
                      (alarmForm.alarmKey == '5' || alarmForm.alarmKey == '6')
                        ? alarmRules.topThreValue
                        : []
                    "
                  >
                    <el-input
                      v-model="alarmForm.topThreValue"
                      :placeholder="$t('上限阈值')"
                      clearable
                      size="mini"
                      style="width: 80px; margin: 0 8px"
                    />
                  </el-form-item>
                  <span>-</span>
                  <el-form-item
                    prop="downThreValue"
                    :rules="
                      enumType == '0' &&
                      (alarmForm.alarmKey == '5' || alarmForm.alarmKey == '6')
                        ? alarmRules.downThreValue
                        : []
                    "
                  >
                    <el-input
                      v-model="alarmForm.downThreValue"
                      :placeholder="$t('下限阈值')"
                      clearable
                      size="mini"
                      style="width: 80px; margin-left: 8px"
                    />
                  </el-form-item>
                </template>
                <!-- 告警预览 -->
                <div style="margin-top: 21px">
                  <el-form-item :label="$t('告警预览') + '：'">
                    <div class="color-block">
                      <!-- 正常 -->
                      <div v-if="onlyNormal">
                        <div class="all-normal">
                          <div>{{ $t("正常") }}</div>
                          <div class="num-font">
                            <span>{{ minNums }}</span>
                            <span>{{ maxNums }}</span>
                          </div>
                        </div>
                      </div>
                      <!-- 正常 一般告警 -->
                      <div v-else>
                        <div class="num-normal">
                          <div
                            v-for="(item, index) in colorBlockList"
                            :key="index"
                          >
                            <span
                              :style="`width:${item.width}px;color:${item.color};background-color:${item.bgc}`"
                              >{{ item.ctx }}</span
                            >
                          </div>
                        </div>
                        <div class="num-font">
                          <div
                            v-for="(item, index) in colorNumList"
                            :key="index"
                          >
                            <span :style="`width:${item.width}px;`">{{
                              item.ctx
                            }}</span>
                          </div>
                        </div>
                      </div>
                      <div class="serch-btn refresh" @click="refreshClick">
                        {{ $t("刷新") }}
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <!-- 枚举常规 -->
              <template v-if="enumType == '1'">
                <el-row>
                  <el-col :span="12" :xs="24">
                    <el-row style="margin-bottom: 10px">
                      <span class="enum-span-label">{{
                        $t("告警等级" + "：")
                      }}</span>
                      <el-select
                        v-model="enumAlarmLevel"
                        :placeholder="$t('请选择')"
                        clearable
                        size="mini"
                        disabled
                        style="width: 120px; margin-left: 15px"
                      >
                        <el-option
                          v-for="dict in alarmLevelList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-row>
                    <!-- 可选表格 -->
                    <el-table
                      height="200"
                      :data="alarmSelectData"
                      ref="enumSelectTableRef"
                      @selection-change="handleSelectionChange"
                      style="margin-left: 107px"
                    >
                      <el-table-column
                        type="selection"
                        :label="$t('告警阈值')"
                      ></el-table-column>
                      <el-table-column
                        width="100"
                        prop="enumValue"
                        :label="$t('枚举名称')"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        width="100"
                        prop="enumNumber"
                        :label="$t('枚举值')"
                        align="center"
                      ></el-table-column>
                    </el-table>
                  </el-col>
                  <el-col :span="12" :xs="24">
                    <el-row style="margin-bottom: 10px">
                      <span class="enum-span-label">{{
                        $t("告警预览" + "：")
                      }}</span>
                      <span
                        @click="enumRefresh"
                        class="serch-btn"
                        style="padding: 5px 15px"
                        >{{ $t("刷新") }}</span
                      >
                    </el-row>
                    <el-table
                      :data="alarmColorData"
                      height="200"
                      style="margin-left: 93px"
                    >
                      <el-table-column
                        width="100"
                        prop="enumValue"
                        :label="$t('枚举名称')"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        width="100"
                        prop="enumAlarm"
                        :label="$t('枚举值')"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <span
                            :class="[
                              scope.row.type == '1' ? 'normal' : '',
                              scope.row.type == '2' ? 'unnaomal' : '',
                            ]"
                            >{{ scope.row.enumAlarm }}</span
                          ></template
                        ></el-table-column
                      >
                    </el-table>
                  </el-col>
                </el-row>
              </template>
            </el-form>
          </el-row>
          <el-row class="second-row">
            <div class="trend-alarm">
              <div class="title">{{ $t("趋势告警规则") }}</div>
              <div>
                <el-switch
                  v-model="trendAlarm"
                  active-value="1"
                  inactive-value="0"
                  active-color="#00D1FF"
                >
                </el-switch>
              </div>
            </div>
            <el-form
              inline
              size="small"
              label-width="150px"
              v-if="trendAlarm == '1'"
            >
              <el-form-item :label="$t('告警等级') + '：'">
                <el-select
                  v-model="trendAlarmLevel"
                  :placeholder="$t('请选择')"
                  clearable
                  size="mini"
                  disabled
                  style="width: 120px"
                >
                  <el-option
                    v-for="dict in alarmLevelList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="enumType == '0'">
                <el-select
                  v-model="trendAlarmKey"
                  :placeholder="$t('请选择')"
                  clearable
                  size="mini"
                  disabled
                  style="width: 120px"
                >
                  <el-option
                    v-for="dict in symbolList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-else>
                <el-select
                  v-model="trendAlarmKey"
                  :placeholder="$t('请选择')"
                  clearable
                  size="mini"
                  disabled
                  style="width: 120px"
                >
                  <el-option
                    v-for="dict in enumSymbolList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="enumType == '0'">
                <el-input
                  v-model="trendAlarmValue"
                  :placeholder="$t('阈值')"
                  size="mini"
                  style="width: 100px; margin-left: 10px"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <!-- 操作按钮 -->
            <div class="alarm-btns">
              <div @click="saveAlarmSetting" class="serch-btn">
                {{ $t("保存") }}
              </div>
              <div class="reset-btn">{{ $t("取消") }}</div>
            </div></el-row
          >
        </el-col>
      </el-row>
    </div>
    <!-- 抽屉 -->
    <el-drawer
      :title="$t('批量设置')"
      :visible.sync="drawerVisible"
      direction="rtl"
      :before-close="handleClose"
      class="setting-drawer"
      :size="drawSize"
    >
      <el-form
        inline
        :model="drawerForm"
        ref="drawAlarmRef"
        :rules="drawerAlarmRules"
        size="small"
        label-width="115px"
      >
        <el-form-item :label="$t('数据类型')">
          <div class="data-type">
            {{ drawEnumType == "0" ? $t("数值") : $t("枚举") }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('设置方式')" required>
          <el-radio-group v-model="drawerForm.setType">
            <el-radio label="1">{{ $t("自定义") }}</el-radio>
            <el-radio label="2" disabled>{{ $t("选择模板") }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 数值常规 -->
        <template v-if="drawEnumType == '0'">
          <div style="display: flex">
            <el-form-item :label="$t('告警等级')">
              <el-select
                v-model="drawerForm.alarmLevel"
                :placeholder="$t('请选择')"
                clearable
                size="mini"
                disabled
                style="width: 120px"
              >
                <el-option
                  v-for="dict in alarmLevelList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <!-- 符号选择 -->
            <el-form-item prop="alarmKey" style="margin-top: 20px">
              <el-select
                v-model="drawerForm.alarmKey"
                :placeholder="$t('请选择')"
                clearable
                size="mini"
                style="width: 120px; margin: 0 4px"
                @change="drawSymbolChange"
              >
                <el-option
                  v-for="dict in symbolList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <!-- 阈值 -->
            <el-form-item
              v-if="drawShowOne"
              prop="threValue"
              style="margin-top: 20px"
              :rules="
                this.drawEnumType == '0' &&
                drawerForm.alarmKey !== '5' &&
                drawerForm.alarmKey !== '6'
                  ? drawerAlarmRules.threValue
                  : []
              "
            >
              <el-input
                v-model="drawerForm.threValue"
                :placeholder="$t('阈值')"
                clearable
                size="mini"
                style="width: 86px"
              />
            </el-form-item>
            <template v-else>
              <el-form-item
                prop="topThreValue"
                style="margin-top: 20px"
                :rules="
                  this.drawEnumType == '0' &&
                  (drawerForm.alarmKey == '5' || drawerForm.alarmKey == '6')
                    ? drawerAlarmRules.topThreValue
                    : []
                "
              >
                <el-input
                  v-model="drawerForm.topThreValue"
                  :placeholder="$t('上限阈值')"
                  clearable
                  size="mini"
                  style="width: 96px; margin: 0 8px"
                />
              </el-form-item>
              <span>-</span>
              <el-form-item
                prop="downThreValue"
                style="margin-top: 20px"
                :rules="
                  this.drawEnumType == '0' &&
                  (drawerForm.alarmKey == '5' || drawerForm.alarmKey == '6')
                    ? drawerAlarmRules.downThreValue
                    : []
                "
              >
                <el-input
                  v-model="drawerForm.downThreValue"
                  :placeholder="$t('下限阈值')"
                  clearable
                  size="mini"
                  style="width: 96px; margin-left: 8px"
                />
              </el-form-item>
            </template>
          </div>
          <!-- 告警预览 -->
          <div style="margin-top: 21px">
            <el-form-item :label="$t('告警预览') + '：'">
              <div class="color-block">
                <!-- 正常 一般告警 -->
                <div>
                  <div class="num-normal">
                    <div
                      v-for="(item, index) in drawColorBlockList"
                      :key="index"
                    >
                      <span
                        :style="`width:${item.width}px;color:${item.color};background-color:${item.bgc}`"
                        >{{ item.ctx }}</span
                      >
                    </div>
                  </div>
                  <div>
                    <span
                      v-for="(item, index) in drawColorCtxList"
                      :key="index"
                      :style="`display: inline-block; width:${item.width}px;color: #fff`"
                      >{{ item.ctx }}</span
                    >
                  </div>
                </div>
                <div class="serch-btn refresh" @click="drawRefreshClick">
                  {{ $t("刷新") }}
                </div>
              </div>
            </el-form-item>
          </div>
        </template>
        <!-- 枚举常规 -->
        <template v-if="drawEnumType == '1'">
          <el-row>
            <div>
              <el-row style="margin-bottom: 10px">
                <span class="enum-span-label">{{ $t("告警等级" + "：") }}</span>
                <el-select
                  v-model="drawEnumAlarmLevel"
                  :placeholder="$t('请选择')"
                  clearable
                  size="mini"
                  disabled
                  style="width: 120px; margin-left: 15px"
                >
                  <el-option
                    v-for="dict in alarmLevelList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-row>
              <!-- 可选表格 -->
              <div class="enum-table">
                <el-table
                  height="180"
                  :data="drawAlarmSelectData"
                  @selection-change="drawHandleSelectionChange"
                >
                  <el-table-column
                    type="selection"
                    :label="$t('告警阈值')"
                  ></el-table-column>
                  <el-table-column
                    width="100"
                    prop="enumValue"
                    :label="$t('枚举名称')"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    width="100"
                    prop="enumNumber"
                    :label="$t('枚举值')"
                    align="center"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
            <div>
              <el-row style="margin-bottom: 10px">
                <span class="enum-span-label">{{ $t("告警预览" + "：") }}</span>
                <span @click="dreawEnumRefresh" class="serch-btn enum-span">{{
                  $t("刷新")
                }}</span>
              </el-row>
              <div class="enum-table">
                <el-table height="180" :data="drawAlarmColorData">
                  <el-table-column
                    width="100"
                    prop="enumValue"
                    :label="$t('枚举名称')"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    width="100"
                    prop="enumAlarm"
                    :label="$t('枚举值')"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span
                        :class="[
                          scope.row.type == '1' ? 'normal' : '',
                          scope.row.type == '2' ? 'unnaomal' : '',
                        ]"
                        >{{ scope.row.enumAlarm }}</span
                      ></template
                    ></el-table-column
                  >
                </el-table>
              </div>
            </div>
          </el-row>
        </template>
      </el-form>
      <div class="demo-drawer__footer drawer-footer">
        <div @click="submitBtn" class="serch-btn">{{ $t("保存") }}</div>
        <div @click="drawerVisible = false" class="reset-btn">
          {{ $t("取消") }}
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
//后期更改接口
import { API_treeOption } from "@/api/data/objData";
import {
  API_pointTree,
  API_deviceInfo,
  API_alarmRuleInfo,
  API_alarmRuleAdd,
  API_alarmRuleEdit,
  API_calibDeviceInfo,
  API_isSameDataType,
  API_saveBatch,
} from "@/api/task/alarmrules.js";
export default {
  dicts: ["recognition"],
  data() {
    return {
      showOne: true, //告警规则展示的 阈值
      drawerVisible: false, //批量设置抽屉
      onlyNormal: true,
      sevePort: window.location.protocol + "//" + window.location.host,
      currentTreeId: "", //被选中的树ID
      currentTab: "", //当前选中的tab图片
      enumType: 0, //枚举类型
      minNums: "0",
      maxNums: "500",
      drawSize: "40%",
      objTreeInput: undefined, //搜索框数据
      listQuery: {
        deviceName: "",
        viewPointName: "",
        deviceType: "",
        identifyType: "",
        dataType: "",
      },
      checkedTree: [], //被选中的树节点
      // tree数据
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label",
      },
      //tree图标
      icons: {
        1: require("@/assets/images/objectData/rootobj.png"), //根节点
        2: require("@/assets/images/objectData/jiedianobj.png"), //节点
        3: require("@/assets/images/objectData/ptstobj.png"), //普通实体对象
        4: require("@/assets/images/objectData/ptxnobj.png"), //普通虚拟对象
        5: require("@/assets/images/objectData/hsstobj.png"), //红色实体对象
        6: require("@/assets/images/objectData/hsxnobj.png"), //红色虚拟对象
      },
      alarmId: "", //告警规则ID
      //告警规则
      alarmForm: {
        setType: "1",
        alarmLevel: "2", //告警等级
        alarmKey: "",
        threValue: "", //阈值
        topThreValue: "", //上限阈值
        downThreValue: "", //下限阈值
      },
      trendAlarm: "0", //趋势告警开关
      trendAlarmLevel: "2", //等级
      trendAlarmKey: "1", //条件
      trendAlarmValue: "", //告警值
      //告警等级
      alarmLevelList: [
        {
          label: this.$t("一般告警"),
          value: "2",
        },
      ],
      enumSelected: [], //被选中的数据
      alarmSelectData: [], //枚举值 table
      drawAlarmSelectData: [], //抽屉 枚举值 table
      //符号
      symbolList: [
        {
          label: ">",
          value: "1",
        },
        {
          label: ">=",
          value: "2",
        },
        {
          label: "<",
          value: "3",
        },
        {
          label: "<=",
          value: "4",
        },
        {
          label: this.$t("介于阈值范围"),
          value: "5",
        },
        {
          label: this.$t("超出阈值范围"),
          value: "6",
        },
      ],
      enumSymbolList: [
        {
          label: "状态不一致",
          value: "1",
        },
      ],
      // 色块
      colorBlockList: [
        {
          width: "",
          color: "",
          bgc: "",
          ctx: "",
        },
      ],
      //色块 数组
      colorNumList: [
        {
          width: "",
          ctx: "",
        },
      ],
      enumAlarmLevel: "2", //枚举告警等级
      alarmColorData: [], //常规 枚举色块数据
      drawAlarmColorData: [], //抽屉 常规 枚举色块数据
      multipleSelection: [], //常规枚举选中的数据
      drawMultipleSelection: [], //抽屉 常规枚举选中的数据
      alarmRules: {
        // 阈值
        threValue: [
          {
            require: true,
            validator: (rules, value, cb) => {
              console.warn(
                "this.alarmForm.alarmKey",
                this.alarmForm.alarmKey,
                Number(this.alarmForm.threValue),
                Number(this.maxNums)
              );
              if (
                (this.alarmForm.alarmKey == "1" ||
                  this.alarmForm.alarmKey == "2") &&
                (Number(this.alarmForm.threValue) > Number(this.maxNums) ||
                  Number(this.alarmForm.threValue) < Number(this.minNums))
              ) {
                return cb(new Error(this.$t("阈值不在量程范围！")));
              } else if (
                ((this.alarmForm.alarmKey == "3" ||
                  this.alarmForm.alarmKey == "4") &&
                  Number(this.alarmForm.threValue) < Number(this.minNums)) ||
                Number(this.alarmForm.threValue) > Number(this.maxNums)
              ) {
                return cb(new Error(this.$t("阈值低于最低量程或高于最高量程")));
              } else {
                return cb();
              }
            },
            trigger: "blur",
          },
        ],
        //上限阈值
        topThreValue: [
          {
            require: true,
            validator: (rules, value, cb) => {
              if (
                this.alarmForm.alarmKey == "5" ||
                this.alarmForm.alarmKey == "6"
              ) {
                if (
                  Number(this.alarmForm.topThreValue) < Number(this.minNums)
                ) {
                  return cb(new Error(this.$t("上限阈值低于最低量程")));
                } else if (
                  Number(this.alarmForm.topThreValue) >
                  Number(this.alarmForm.downThreValue)
                ) {
                  return cb(new Error(this.$t("上限阈值超出下限阈值")));
                } else {
                  return cb();
                }
              }
            },
            trigger: "blur",
          },
        ],
        downThreValue: [
          {
            require: true,
            validator: (rules, value, cb) => {
              if (
                this.alarmForm.alarmKey == "5" ||
                this.alarmForm.alarmKey == "6"
              ) {
                if (
                  Number(this.alarmForm.downThreValue) > Number(this.maxNums)
                ) {
                  return cb(new Error(this.$t("下限阈值超出最高量程")));
                } else if (
                  Number(this.alarmForm.downThreValue) <
                  Number(this.alarmForm.topThreValue)
                ) {
                  return cb(new Error(this.$t("下限阈值低于上限阈值")));
                } else {
                  return cb();
                }
              }
            },
            trigger: "blur",
          },
        ],
      },
      //抽屉盒子
      drawEnumType: "", //枚举类型
      drawShowOne: true, //true：只有阈值
      drawerForm: {
        setType: "1", //设置方式
        alarmLevel: "2", //告警等级
        alarmKey: "", //符号
      },
      drawEnumAlarmLevel: "2", //枚举告警等级
      //常规 色块
      drawColorBlockList: [
        {
          width: "376",
          color: "#002640",
          bgc: "#73F6AF",
          ctx: this.$t("正常"),
        },
      ],
      drawColorCtxList: [], // 常规 数值
      nodeItem: {
        viewPointName: "",
        deviceName: "",
        deviceType: "",
        identifyTypeName: "",
        calibrationId: "",
        calibrationType: "",
        unit: "",
      }, //巡检对象、巡检点数据项
      camereList: [], //可见光 标定集合
      thermalList: [], //红外 标定集合
      childList: [], //叶子结点
      //抽屉盒子检验规则
      drawerAlarmRules: {
        // 阈值
        alarmKey: [
          {
            required: true,
            message: this.$t("请选择"),
            trigger: "change",
          },
        ],
        // 阈值
        threValue: [
          {
            required: true,
            message: this.$t("请输入阈值"),
            trigger: "blur",
          },
        ],
        // 上线阈值
        topThreValue: [
          {
            required: true,
            message: this.$t("请选择"),
            trigger: "blur",
          },
        ],
        //下限阈值
        downThreValue: [
          {
            require: true,
            validator: (rules, value, cb) => {
              if (
                Number(this.drawerForm.downThreValue) <=
                Number(this.drawerForm.topThreValue)
              ) {
                return cb(new Error(this.$t("下线阈值超出上限阈值")));
              } else {
                return cb();
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getTreeselect();
  },
  watch: {
    objTreeInput(val) {
      this.$refs.objTreeRef.filter(val);
    },
  },
  methods: {
    /**告警等级 符号change事件 */
    alarmKyeChange(val) {
      this.$refs.alarmRef.clearValidate();
      this.alarmForm.threValue = "";
      this.alarmForm.topThreValue = "";
      this.alarmForm.downThreValue = "";
      if (val == "5" || val == "6") {
        this.showOne = false;
      } else {
        this.showOne = true;
      }
    },
    /**搜索 btn */
    serachBtn() {
      let obj = {
        ...this.listQuery,
      };
      API_pointTree(obj).then((res) => {
        if (res.code == 200) {
          this.deptOptions = res.deviceTrees;
        } else {
          this.$message.error(this.$t("请求失败请重试"));
        }
      });
    },
    /**重置 */
    resetFormBtn() {
      this.listQuery = {
        deviceName: "",
        viewPointName: "",
        deviceType: "",
        identifyType: "",
        dataType: "",
      };
      this.serachBtn();
    },
    /**保存告警规则设置 */
    saveAlarmSetting() {
      this.$refs.alarmRef.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          let params = {};
          let alarmValue = this.multipleSelection;
          if (alarmValue && alarmValue.length > 0) {
            if (alarmValue.indexOf(",") == -1) {
              alarmValue = String(alarmValue);
            } else {
              alarmValue = alarmValue.join(",");
            }
          } else {
            alarmValue = String(alarmValue);
          }
          if (this.alarmId) {
            // 修改
            params = {
              id: this.alarmId,
              deviceId: this.currentTreeId, //树ID
              setType: this.alarmForm.setType, //设置方式
              level: this.enumType == "0" ? "1" : "2", //1常规数值、2常规枚举
              alarmConditionsWeb: [
                {
                  alarmLevel:
                    this.enumType == "0"
                      ? this.alarmForm.alarmLevel
                      : this.enumAlarmLevel,
                  alarmKey:
                    this.enumType == "0" ? this.alarmForm.alarmKey : "9",
                  alarmValue:
                    this.enumType == "0"
                      ? this.alarmForm.alarmKey == "5" ||
                        this.alarmForm.alarmKey == "6"
                        ? this.alarmForm.topThreValue
                        : this.alarmForm.threValue
                      : alarmValue,
                  alarmValueEnd:
                    this.enumType == "0" ? this.alarmForm.downThreValue : "",
                },
              ],
              trendAlarm: this.trendAlarm, //趋势告警
              trendAlarmLevel: this.trendAlarmLevel, //等级
              trendAlarmKey: this.trendAlarmKey, //条件
              trendAlarmValue: this.trendAlarmValue, //值
            };
            API_alarmRuleEdit(params)
              .then((res) => {
                if (res.code == 200) {
                  this.$message.success(this.$t("保存成功"));
                }
              })
              .finally(() => {
                loading.close();
              });
          } else {
            // 新增
            params = {
              deviceId: this.currentTreeId, //树ID
              setType: this.alarmForm.setType, //设置方式
              level: this.enumType == "0" ? "1" : "2", //常规数值、常规枚举
              alarmConditionsWeb: [
                {
                  alarmLevel:
                    this.enumType == "0"
                      ? this.alarmForm.alarmLevel
                      : this.enumAlarmLevel,
                  alarmKey:
                    this.enumType == "0" ? this.alarmForm.alarmKey : "9",
                  alarmValue:
                    this.enumType == "0"
                      ? this.alarmForm.alarmKey == "5" ||
                        this.alarmForm.alarmKey == "6"
                        ? this.alarmForm.topThreValue
                        : this.alarmForm.threValue
                      : alarmValue,
                  alarmValueEnd:
                    this.enumType == "0" ? this.alarmForm.downThreValue : "",
                },
              ],
              trendAlarm: this.trendAlarm, //趋势告警
              trendAlarmLevel: this.trendAlarmLevel, //等级
              trendAlarmKey: this.trendAlarmKey, //条件
              trendAlarmValue: this.trendAlarmValue, //值
            };
            API_alarmRuleAdd(params)
              .then((res) => {
                if (res.code == 200) {
                  this.$message.success(this.$t("保存成功"));
                }
              })
              .finally(() => {
                loading.close();
              });
          }
        }
      });
    },
    /** 查询巡检对象树 数据 */
    getTreeselect() {
      API_treeOption()
        .then((res) => {
          if (res.code == "200") {
            this.deptOptions = res.deviceTrees;
            //设置默认选中第一个
            if (this.deptOptions.length == 0) return;
            this.getFirstChild(this.deptOptions);
            this.currentTreeId = this.childList[0];
            this.getNodeDetail(this.currentTreeId);
            //查询方法
          } else {
            this.$message.error(res.msg);
          }
        })
        .then(() => {
          if (this.deptOptions.length == 0) return;
          // 获取告警规则信息
          this.getAlarmDetail(this.currentTreeId);
        });
    },
    /**树 筛选节点 */
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    /**树节点 click */
    async nodeClick(node) {
      this.currentTreeId = node.treeId;
      //清除原本数据
      this.alarmId = "";
      this.alarmForm.alarmKey = "";
      this.alarmForm.threValue = "";
      this.alarmForm.topThreValue = "";
      this.alarmForm.downThreValue = "";
      this.camereList = [];
      this.thermalList = [];
      this.nodeItem = {};
      this.trendAlarm = ""; //清空趋势告警规则
      this.trendAlarmValue = "";
      //获取详情信息
      if (node.type == "2" || node.type == "3") {
        await this.getNodeDetail(node.treeId);
      } else {
        this.$message.info(this.$t("请选择巡检对象查看可见光与红外"));
        return;
      }
    },
    /**获取页面详情数据 */
    async getNodeDetail(treeId) {
      var c = document.getElementById("canvasImg");
      c.width = c.width;
      //数据类型清空 解决引起的回显问题
      this.enumType = "";
      API_deviceInfo(treeId).then((res) => {
        if (res.code == 200 && res.data) {
          this.nodeItem = res.data;
          this.$set(this, "enumType", this.nodeItem.dataType + "");
          //最小量程
          this.minNums = res.data.minRange;
          //最大量程
          this.maxNums = res.data.maxRange;
          //设置可见光高亮
          this.$set(this, "currentTab", "1");
          //可见光
          let cameroUrl =
            this.sevePort + this.nodeItem.recognitionPicResourceUrl;
          //点集合
          if (this.nodeItem.auxiliaryBox == null) return;
          eval(this.nodeItem.auxiliaryBox).filter((pointItem) => {
            if (pointItem.device_type == 0) {
              this.camereList.push(pointItem.device_bBox);
            } else {
              this.thermalList.push(pointItem.device_bBox);
            }
          });
          //获取告警规则信息
          this.getAlarmDetail(this.currentTreeId);
          if (this.enumType == "1") {
            //获取 枚举 告警规则 表格数据
            this.getCalibDeviceInfo(this.currentTreeId);
          }
          this.refreshClick();
          //标定多边形
          this.selectArea(cameroUrl, this.camereList);
        }
      });
    },
    /**获取告警规则数据 11111111*/
    async getAlarmDetail(treeId) {
      await API_alarmRuleInfo(treeId).then((res) => {
        if (res.code == 200) {
          // if (!res.data) {
          //   this.alarmSelectData.forEach((item, index) => {
          //     if (
          //       this.enumSelected &&
          //       this.enumSelected.length > 0 &&
          //       this.enumSelected.includes(item.enumNumber)
          //     ) {
          //       this.$nextTick(() => {
          //         this.$refs.enumSelectTableRef.toggleRowSelection(
          //           this.alarmSelectData[index],
          //           false
          //         );
          //         this.enumSelected = [];
          //       });
          //       this.$forceUpdate();
          //     }
          //   });
          //   this.multipleSelection = this.enumSelected;
          //   // 色块回显
          //   this.enumRefresh();
          // } else {
          this.alarmId = res.data.id;
          //设置方式
          this.alarmForm.setType = res.data.setType + "";
          this.trendAlarm = res.data.trendAlarm + ""; //趋势告警
          //数值告警类型
          if (this.enumType == "0") {
            // 数值类型赋值
            this.$set(
              this.alarmForm,
              "alarmLevel",
              res.data.alarmConditionsWeb[0].alarmLevel + ""
            );
            //符号
            this.$set(
              this.alarmForm,
              "alarmKey",
              res.data.alarmConditionsWeb[0].alarmKey + ""
            );
            //阈值
            if (
              res.data.alarmConditionsWeb[0].alarmKey == "5" ||
              res.data.alarmConditionsWeb[0].alarmKey == "6"
            ) {
              this.$set(this, "showOne", false);
              // 上限阈值
              this.$set(
                this.alarmForm,
                "topThreValue",
                res.data.alarmConditionsWeb[0].alarmValue
              );
              // 下限阈值
              this.$set(
                this.alarmForm,
                "downThreValue",
                res.data.alarmConditionsWeb[0].alarmValueEnd
              );
              //色块
              this.refreshClick();
            } else {
              this.$set(this, "showOne", true);
              // 阈值
              this.$set(
                this.alarmForm,
                "threValue",
                res.data.alarmConditionsWeb[0].alarmValue
              );
              //色块
              this.refreshClick();
            }

            this.trendAlarmLevel = "2"; //等级
            this.trendAlarmKey = "1"; //条件
            this.trendAlarmValue = res.data.trendAlarmValue; //值
          } else {
            /**枚举 */
            setTimeout(() => {
              //告警等级
              this.$set(
                this,
                "enumAlarmLevel",
                res.data.alarmConditionsWeb[0].alarmLevel + ""
              );
            }, 50);
            //表格回显
            let enumSelected = res.data.alarmConditionsWeb[0].alarmValue || "";
            this.enumSelected = enumSelected.split(",");
            console.warn("回显回显回显", this.enumSelected);
            for (let i = 0; i < this.enumSelected.length; i++) {
              this.enumSelected[i] = parseInt(this.enumSelected[i]);
            }
            this.trendAlarmKey = "1";
          }
          // }
        }
      });
    },
    /** tab点击 */
    tabClick(type) {
      switch (type) {
        case "1":
          this.$set(this, "currentTab", "1");
          //图片
          let cameroUrl =
            this.sevePort + this.nodeItem.recognitionPicResourceUrl;
          //标定多边形
          this.selectArea(cameroUrl, this.camereList);
          break;
        case "2":
          this.$set(this, "currentTab", "2");
          //图片
          let redUrl =
            this.sevePort + this.nodeItem.recognitionInfraredResourceUrl;
          //标定多边形
          this.selectArea(redUrl, this.thermalList);
          break;
      }
    },
    /**刷新 */
    refreshClick() {
      this.$refs["alarmRef"].validate((valid) => {
        if (valid) {
          this.onlyNormal = false;
          if (
            (this.alarmForm.alarmKey == "1" ||
              this.alarmForm.alarmKey == "2") &&
            parseInt(this.maxNums) == parseInt(this.alarmForm.threValue)
          ) {
            {
              //正常
              this.$set(this, "colorBlockList", [
                {
                  width: 400,
                  color: "#002640;",
                  bgc: "#73F6AF ",
                  ctx: this.$t("正常"),
                },
              ]);
              this.$set(this, "colorNumList", [
                {
                  width: 400,
                  ctx: this.minNums,
                },
                {
                  width: "20",
                  ctx: this.maxNums,
                },
              ]);
            }
          } else if (
            this.alarmForm.alarmKey == "1" ||
            this.alarmForm.alarmKey == "2"
          ) {
            //大于 大于等于
            this.$set(this, "colorBlockList", [
              {
                width:
                  (Number(this.alarmForm.threValue) / Number(this.maxNums)) *
                  400,
                color: "#002640;",
                bgc: "#73F6AF ",
                ctx: this.$t("正常"),
              },
              {
                width:
                  ((Number(this.maxNums) - Number(this.alarmForm.threValue)) /
                    Number(this.maxNums)) *
                    400 >
                  60
                    ? ((Number(this.maxNums) -
                        Number(this.alarmForm.threValue)) /
                        Number(this.maxNums)) *
                      400
                    : 60,
                color: "rgba(255, 255, 255, 0.96)",
                bgc: "#FFAD30 ",
                ctx: this.$t("一般告警"),
              },
            ]);
            this.$set(this, "colorNumList", [
              {
                width:
                  (Number(this.alarmForm.threValue) / Number(this.maxNums)) *
                  400,
                ctx: this.minNums,
              },
              {
                width:
                  ((Number(this.maxNums) - Number(this.alarmForm.threValue)) /
                    Number(this.maxNums)) *
                    400 >
                  60
                    ? ((Number(this.maxNums) -
                        Number(this.alarmForm.threValue)) /
                        Number(this.maxNums)) *
                      400
                    : 60,
                ctx: this.alarmForm.threValue,
              },
              {
                width: "20",
                ctx: this.maxNums,
              },
            ]);
          } else if (
            this.alarmForm.alarmKey == "3" ||
            this.alarmForm.alarmKey == "4"
          ) {
            //小于 小于等于
            this.$set(this, "colorBlockList", [
              {
                width:
                  (Number(this.alarmForm.threValue) / Number(this.maxNums)) *
                    400 <
                  60
                    ? 60
                    : (Number(this.alarmForm.threValue) /
                        Number(this.maxNums)) *
                      400,
                color: "rgba(255, 255, 255, 0.96)",
                bgc: "#FFAD30 ",
                ctx: this.$t("一般告警"),
              },
              {
                width:
                  ((Number(this.maxNums) - Number(this.alarmForm.threValue)) /
                    Number(this.maxNums)) *
                  400,
                color: "#002640;",
                bgc: "#73F6AF ",
                ctx: this.$t("正常"),
              },
            ]);
            this.$set(this, "colorNumList", [
              {
                width:
                  (Number(this.alarmForm.threValue) / Number(this.maxNums)) *
                    400 <
                  60
                    ? 60
                    : (Number(this.alarmForm.threValue) /
                        Number(this.maxNums)) *
                      400,
                ctx: this.minNums,
              },
              {
                width:
                  ((Number(this.maxNums) - Number(this.alarmForm.threValue)) /
                    Number(this.maxNums)) *
                  400,
                ctx: this.alarmForm.threValue,
              },
              {
                width: "20",
                ctx: this.maxNums,
              },
            ]);
          } else if (this.alarmForm.alarmKey == "5") {
            //介于
            this.$set(this, "colorBlockList", [
              {
                width:
                  ((Number(this.alarmForm.topThreValue) -
                    Number(this.minNums)) /
                    Number(this.maxNums)) *
                    400 >
                  60
                    ? ((Number(this.alarmForm.topThreValue) -
                        Number(this.minNums)) /
                        Number(this.maxNums)) *
                      400
                    : 60,
                color: "#002640;",
                bgc: "#73F6AF ",
                ctx: this.$t("正常"),
              },
              {
                width:
                  ((Number(this.alarmForm.downThreValue) -
                    Number(this.alarmForm.topThreValue)) /
                    Number(this.maxNums)) *
                    400 >
                  60
                    ? ((Number(this.alarmForm.downThreValue) -
                        Number(this.alarmForm.topThreValue)) /
                        Number(this.maxNums)) *
                      400
                    : 60,
                color: "rgba(255, 255, 255, 0.96)",
                bgc: "#FFAD30 ",
                ctx: this.$t("一般告警"),
              },
              {
                width:
                  ((Number(this.maxNums) -
                    Number(this.alarmForm.downThreValue)) /
                    Number(this.maxNums)) *
                  400,
                color: "#002640;",
                bgc: "#73F6AF ",
                ctx: this.$t("正常"),
              },
            ]);
            this.$set(this, "colorNumList", [
              {
                width:
                  ((Number(this.alarmForm.topThreValue) -
                    Number(this.minNums)) /
                    Number(this.maxNums)) *
                  400,
                ctx: this.minNums,
              },
              {
                width:
                  ((Number(this.alarmForm.downThreValue) -
                    Number(this.alarmForm.topThreValue)) /
                    Number(this.maxNums)) *
                  400,
                ctx: this.alarmForm.topThreValue,
              },
              {
                width:
                  ((Number(this.maxNums) -
                    Number(this.alarmForm.downThreValue)) /
                    Number(this.maxNums)) *
                  400,
                ctx: this.alarmForm.downThreValue,
              },
              {
                width: "30",
                ctx: this.maxNums,
              },
            ]);
          } else if (this.alarmForm.alarmKey == "6") {
            //超出
            this.$set(this, "colorBlockList", [
              {
                width:
                  ((Number(this.alarmForm.topThreValue) -
                    Number(this.minNums)) /
                    Number(this.maxNums)) *
                  400,
                color: "rgba(255, 255, 255, 0.96)",
                bgc: "#FFAD30 ",
                ctx: this.$t("一般告警"),
              },
              {
                width:
                  ((Number(this.alarmForm.downThreValue) -
                    Number(this.alarmForm.topThreValue)) /
                    Number(this.maxNums)) *
                  400,
                color: "#002640;",
                bgc: "#73F6AF ",
                ctx: this.$t("正常"),
              },
              {
                width:
                  ((Number(this.maxNums) -
                    Number(this.alarmForm.downThreValue)) /
                    Number(this.maxNums)) *
                  400,
                color: "rgba(255, 255, 255, 0.96)",
                bgc: "#FFAD30 ",
                ctx: this.$t("一般告警"),
              },
            ]);
            this.$set(this, "colorNumList", [
              {
                width:
                  ((Number(this.alarmForm.topThreValue) -
                    Number(this.minNums)) /
                    Number(this.maxNums)) *
                  400,
                ctx: this.minNums,
              },
              {
                width:
                  ((Number(this.alarmForm.downThreValue) -
                    Number(this.alarmForm.topThreValue)) /
                    Number(this.maxNums)) *
                  400,
                ctx: this.alarmForm.topThreValue,
              },
              {
                width:
                  ((Number(this.maxNums) -
                    Number(this.alarmForm.downThreValue)) /
                    Number(this.maxNums)) *
                  400,
                ctx: this.alarmForm.downThreValue,
              },
              {
                width: "30",
                ctx: this.maxNums,
              },
            ]);
          } else {
            {
              //正常
              this.$set(this, "colorBlockList", [
                {
                  width: 400,
                  color: "#002640;",
                  bgc: "#73F6AF ",
                  ctx: this.$t("正常"),
                },
              ]);
              this.$set(this, "colorNumList", [
                {
                  width: 400,
                  ctx: this.minNums,
                },
                {
                  width: "20",
                  ctx: this.maxNums,
                },
              ]);
            }
          }
        }
      });
    },
    /**选中的常规枚举数据 */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelection = this.multipleSelection.map(
        (item) => item.enumNumber
      );
    },
    /**抽屉 选中常规枚举数据 */
    drawHandleSelectionChange(val) {
      this.drawMultipleSelection = val;
      this.drawMultipleSelection = this.drawMultipleSelection.map(
        (item) => item.enumNumber
      );
    },
    /**常规枚举刷新 */
    enumRefresh() {
      if (!this.multipleSelection) return;
      this.alarmColorData.forEach((item) => {
        if (this.multipleSelection.includes(item.enumNumber)) {
          item.type = "2";
          item.enumAlarm = this.$t("一般告警");
        } else {
          item.type = "1";
          item.enumAlarm = this.$t("正常");
        }
      });
    },
    /**批量设置 */
    batchSettingBtn() {
      this.checkedTree = this.$refs.objTreeRef
        .getCheckedNodes()
        .filter((item) => {
          return item.type == "2";
        });
      this.checkedTree = this.checkedTree.map((item) => item.treeId);
      //校验
      if (this.checkedTree.length == 0)
        return this.$message.info(this.$t("请选择两条及以上数据"));
      API_isSameDataType({ deviceIds: this.checkedTree }).then((res) => {
        if (res.code == 200) {
          this.drawerVisible = true;
          this.$set(this, "drawEnumType", res.data.dataType + "");
          switch (this.drawEnumType) {
            case "0":
              this.drawSize = "40%";
              break;
            case "1":
              this.drawSize = "30%";
              //枚举表格数据
              this.drawAlarmSelectData = res.data.enumMapValue;
              //枚举色块数据
              // alarmColorData
              let drawEnumColorList = res.data.enumMapValue;
              this.drawAlarmColorData = drawEnumColorList.map((item) => {
                return {
                  ...item,
                  enumAlarm: this.$t("正常"),
                  type: "1",
                };
              });
              break;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    /**抽屉 批量设置 保存 */
    submitBtn() {
      //枚举 被选中
      let alarmValue = this.drawMultipleSelection;
      if (alarmValue && alarmValue.length > 0) {
        if (alarmValue.indexOf(",") == -1) {
          alarmValue = String(alarmValue);
        } else {
          alarmValue = alarmValue.join(",");
        }
      }
      let params = {};
      params = {
        dataType: this.drawEnumType,
        setType: this.drawerForm.setType,
        level: this.drawEnumType == "0" ? "1" : "2", //数值、常规
        deviceIds: this.checkedTree,
        alarmConditionsWeb: [
          {
            alarmLevel:
              this.drawEnumType == "0"
                ? this.drawerForm.alarmLevel //数值
                : this.drawEnumAlarmLevel, //枚举
            // alarmEquip: "and",
            alarmKey: this.drawEnumType == "0" ? this.drawerForm.alarmKey : "9",
            alarmValue:
              this.drawEnumType == "0"
                ? this.drawerForm.alarmKey == "5" ||
                  this.drawerForm.alarmKey == "6"
                  ? this.drawerForm.topThreValue
                  : this.drawerForm.threValue
                : alarmValue,
            alarmValueEnd:
              this.drawEnumType == "0" ? this.drawerForm.downThreValue : "",
          },
        ],
      };
      API_saveBatch(params).then((res) => {
        if (res.code == 200) {
          this.drawerVisible = false;
          this.$nextTick(() => {
            //清空表单数据
            this.$refs.drawAlarmRef.resetFields();
            //清空被选中树节点
            this.$refs.objTreeRef.setCheckedNodes([]);
          });
          this.$message.success(this.$t("操作成功"));
        } else {
          this.$message.error(this.$t("请求失败请重试"));
        }
      });
    },
    /**抽屉关闭 */
    handleClose() {
      this.drawerVisible = false;
    },
    /**符号 change */
    drawSymbolChange(val) {
      if (val == "1" || val == "2" || val == "3" || val == "4") {
        this.drawShowOne = true;
      } else {
        this.drawShowOne = false;
      }
    },
    /**常规刷新 */
    drawRefreshClick() {
      this.$refs["drawAlarmRef"].validate((valid) => {
        if (valid) {
          if (
            this.drawerForm.alarmKey == "1" ||
            this.drawerForm.alarmKey == "2"
          ) {
            this.drawColorBlockList = [
              {
                width: "188",
                color: "#002640",
                bgc: "#73F6AF",
                ctx: this.$t("正常"),
              },
              {
                width: "188",
                color: "rgba(255, 255, 255, 0.96)",
                bgc: "#FFAD30",
                ctx: this.$t("一般告警"),
              },
            ];
            this.drawColorCtxList = [
              {
                width: "188",
              },
              {
                width: "188",
                ctx: this.drawerForm.threValue,
              },
            ];
          } else if (
            this.drawerForm.alarmKey == "3" ||
            this.drawerForm.alarmKey == "4"
          ) {
            this.drawColorBlockList = [
              {
                width: "188",
                color: "rgba(255, 255, 255, 0.96)",
                bgc: "#FFAD30",
                ctx: this.$t("一般告警"),
              },
              {
                width: "188",
                color: "#002640",
                bgc: "#73F6AF",
                ctx: this.$t("正常"),
              },
            ];
            this.drawColorCtxList = [
              {
                width: "188",
              },
              {
                width: "188",
                ctx: this.drawerForm.threValue,
              },
            ];
          } else if (this.drawerForm.alarmKey == "5") {
            this.drawColorBlockList = [
              {
                width: "125",
                color: "#002640",
                bgc: "#73F6AF",
                ctx: this.$t("正常"),
              },
              {
                width: "125",
                color: "rgba(255, 255, 255, 0.96)",
                bgc: "#FFAD30",
                ctx: this.$t("一般告警"),
              },
              {
                width: "125",
                color: "#002640",
                bgc: "#73F6AF",
                ctx: this.$t("正常"),
              },
            ];
            this.drawColorCtxList = [
              {
                width: "125",
              },
              {
                width: "125",
                ctx: this.drawerForm.topThreValue,
              },
              {
                width: "125",
                ctx: this.drawerForm.downThreValue,
              },
            ];
          } else if (this.drawerForm.alarmKey == "6") {
            this.drawColorBlockList = [
              {
                width: "125",
                color: "rgba(255, 255, 255, 0.96)",
                bgc: "#FFAD30",
                ctx: this.$t("一般告警"),
              },
              {
                width: "125",
                color: "#002640",
                bgc: "#73F6AF",
                ctx: this.$t("正常"),
              },
              {
                width: "125",
                color: "rgba(255, 255, 255, 0.96)",
                bgc: "#FFAD30",
                ctx: this.$t("一般告警"),
              },
            ];
            this.drawColorCtxList = [
              {
                width: "125",
              },
              {
                width: "125",
                ctx: this.drawerForm.topThreValue,
              },
              {
                width: "125",
                ctx: this.drawerForm.downThreValue,
              },
            ];
          }
        }
      });
    },

    /**枚举 刷新 */
    dreawEnumRefresh() {
      this.drawAlarmColorData.forEach((item) => {
        if (this.drawMultipleSelection.includes(item.enumNumber)) {
          item.type = "2";
          item.enumAlarm = this.$t("一般告警");
        } else {
          item.type = "1";
          item.enumAlarm = this.$t("正常");
        }
      });
    },
    /**获取树节点 第一个叶子节点 */
    getFirstChild(list) {
      if (list && list.length > 0) {
        list.forEach((listItem) => {
          if (listItem.children && listItem.children.length > 0) {
            this.getFirstChild(listItem.children);
          } else {
            this.childList.push(listItem.treeId);
          }
        });
      }
    },
    /**获取对象参数、标定信息 11111111-先*/
    async getCalibDeviceInfo(treeId) {
      await API_calibDeviceInfo(treeId).then((res) => {
        if (res.code == 200) {
          this.alarmSelectData = res.data.enumMapValue;
          let handleArr = this.alarmSelectData;
          //枚举色块
          this.alarmColorData = handleArr.map((item) => {
            return {
              ...item,
              enumAlarm: this.$t("正常"),
              type: "1",
            };
          });
          //常规枚举回显
          this.alarmSelectData.forEach((item, index) => {
            if (
              this.enumSelected &&
              this.enumSelected.length > 0 &&
              this.enumSelected.includes(item.enumNumber)
            ) {
              this.$nextTick(() => {
                this.$refs.enumSelectTableRef.toggleRowSelection(
                  this.alarmSelectData[index],
                  true
                );
              });
              this.$forceUpdate();
            }
          });
          this.multipleSelection = this.enumSelected;
          // 色块回显
          this.enumRefresh();
        }
      });
    },
    /**画图形 */
    selectArea(imgSrc, sceneBox) {
      let ths = this;
      let canvas = this.$refs.canvasImg;
      let ctx = canvas.getContext("2d");
      let img = new Image();
      img.src = imgSrc;
      img.width = (280 * 4) / 3;
      img.height = 224;
      let [width, height] = [img.width, img.height];
      canvas.width = width;
      canvas.height = height;
      //显示图片
      img.onload = function () {
        ctx.drawImage(img, 0, 0, width, height);
        ths.initCanvas(sceneBox);
      };
    },
    /**canvas 画线 */
    initCanvas(sceneBox) {
      this.$nextTick(() => {
        let canvas = this.$refs.canvasImg;
        let ctx = canvas.getContext("2d");
        //画线
        sceneBox.forEach((boxList) => {
          ctx.beginPath();
          let pointsArr = [];
          pointsArr = eval(boxList).map((item) => {
            return { x: item[0], y: item[1] };
          });
          pointsArr.forEach((item) => {
            ctx.lineTo(item.x, item.y);
          });
          ctx.closePath();
          ctx.lineCap = "round";
          ctx.lineJoin = "round";
          ctx.strokeStyle = "red";
          ctx.lineWidth = 3;
          ctx.closePath();
          ctx.stroke();
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  min-height: 820px;
  // margin-top: 16px;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  color: #fff;
  .first-col {
    min-height: 784px;
    padding: 24px 24px 0;
    box-sizing: border-box;
    // border-right: 1px dashed rgba(219, 255, 251, 0.2);
  }
  .header-row {
    height: 318px;
    border-left: 1px dashed rgba(219, 255, 251, 0.2);
    border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
    border-right: 1px dashed rgba(219, 255, 251, 0.2);
    > .el-col:nth-child(2) {
      height: 100%;
      border-left: 1px dashed rgba(219, 255, 251, 0.2);
      border-right: 1px dashed rgba(219, 255, 251, 0.2);
    }
    .el-col {
      padding: 24px;
      box-sizing: border-box;
    }
    //可见光
    .block-info {
      width: 100%;
      height: 280px;
      border: 1px solid rgba(0, 209, 255, 0.7);
      // 可见光
      .tabs {
        display: flex;
        width: 100%;
        height: 39px;
        padding: 11px 24px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);

        .camero,
        .current-tab {
          flex: 1;
          height: 26px;
          font-size: 16px;
          text-align: center;
        }
        .current-tab {
          color: #00d1ff;
          border-bottom: 1px solid #00d1ff;
        }
      }
      .img-box {
        display: flex;
        justify-content: center;
        padding: 8px;
        box-sizing: border-box;
      }
    }
    .info-row {
      display: flex;
      margin-bottom: 16px;
      font-size: 14px;
      .info-title {
        width: 45%;
        text-align: right;
        line-height: 16px;
      }
      .info-content {
        width: 60%;
        line-height: 16px;
      }
    }
  }
  .second-row {
    max-height: 490px;
    padding: 23px 0 32px 24px;
    box-sizing: border-box;
    border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
  }
}
//标亮标题
.title {
  font-size: 16px;
  font-weight: bold;
  color: #00d1ff;
}

.logic-span {
  display: inline-block;
}
//告警预览
.color-block {
  display: flex;
  .num-normal {
    display: flex;
    font-size: 12px;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    span:nth-child(1) {
      width: 299px;
      height: 20px;
      background: #ffad30;
      color: rgba(255, 255, 255, 0.96);
    }
    span:nth-child(2) {
      width: 77px;
      height: 25px;
      background: #73f6af;
      color: #002640;
    }
  }
  .num-font {
    display: flex;
    span:nth-child(1) {
      display: inline-block;
      width: 290px; //上面div的宽度 - 10
    }
    span:nth-child(2) {
      display: inline-block;
    }
  }
  .refresh {
    width: 73px;
    height: 32px;
    line-height: 32px;
    margin-left: 8px;
  }
}
.all-normal {
  div:nth-child(1) {
    display: flex;
    width: 376px;
    height: 20px;
    justify-content: center;
    align-items: center;
    background: #73f6af;
    color: #002640;
  }
  .num-font {
    span:nth-child(1) {
      display: inline-block;
      width: 366px;
    }
  }
}
//常规 枚举表格颜色
.normal {
  color: #73f6af;
}
.unnaomal {
  color: #ffad30;
}
.enum-span-label {
  display: inline-block;
  width: 93px;
  text-align: right;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
}
// 对象参数、标定信息
.obj-calib {
  // max-height: 234px;
  border-left: 1px dashed rgba(219, 255, 251, 0.2);
  border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
  border-right: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 23px 0 0 24px;
  box-sizing: border-box;
  .info-row {
    display: flex;
    margin-bottom: 16px;
    .info-title {
      width: 132px;
      text-align: right;
      font-size: 14px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #a6acb1;
    }
    .info-content {
      font-size: 14px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
//抽屉盒子样式
.setting-drawer {
  //告警预览
  .color-block {
    display: flex;
    .num-normal {
      display: flex;
      font-size: 12px;
      span {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      span:nth-child(1) {
        width: 299px;
        height: 20px;
        background: #ffad30;
        color: rgba(255, 255, 255, 0.96);
      }
      span:nth-child(2) {
        width: 77px;
        height: 20px;
        background: #73f6af;
        color: #002640;
      }
    }
    .num-font {
      display: flex;
      span:nth-child(1) {
        display: inline-block;
        width: 290px; //上面div的宽度 - 10
      }
      span:nth-child(2) {
        display: inline-block;
      }
    }
    .refresh {
      width: 73px;
      height: 32px;
      line-height: 32px;
      margin-left: 8px;
    }
  }
  .all-normal {
    div:nth-child(1) {
      display: flex;
      width: 376px;
      height: 20px;
      justify-content: center;
      align-items: center;
      background: #73f6af;
      color: #002640;
    }
    .num-font {
      span:nth-child(1) {
        display: inline-block;
        width: 366px;
      }
    }
  }
  //常规 枚举表格颜色
  .normal {
    color: #73f6af;
  }
  .unnaomal {
    color: #ffad30;
  }
  .enum-span-label {
    display: inline-block;
    width: 93px;
    text-align: right;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
      Microsoft YaHei, Arial, sans-serif;
  }
}
.alarm-btns {
  display: flex;
  justify-content: center;
  padding-top: 30px;
  box-sizing: border-box;
  // margin-left: 108px;
  div:nth-child(2) {
    margin-left: 16px;
  }
  div {
    width: 88px;
    height: 36px;
    line-height: 36px;
  }
}
.scroll-hidden {
  min-width: 520px;
  height: 500px;
  overflow: auto;
}
.scroll-hidden::-webkit-scrollbar {
  display: none;
}
/**抽屉盒子 */
.el-drawer {
  .data-type {
    color: #ffffff;
  }
}
.enum-span {
  margin-left: 20px;
  padding: 5px 15px;
}
.enum-table {
  padding-left: 110px;
  box-sizing: border-box;
}
.drawer-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  div:nth-child(2) {
    margin-left: 16px;
  }
}
::v-deep {
  .el-form-item__label {
    text-align: center;
  }
  .el-form-item {
    margin-bottom: 8px;
  }
  .el-form-item__error {
    width: 125px;
    padding-top: 0;
  }
  .el-drawer .el-drawer__body {
    display: flex;
    justify-content: center;
  }
}
::v-deep {
  .el-checkbox__input.is-disabled .el-checkbox__inner {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
  }
}
//趋势告警
.trend-alarm {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  box-sizing: border-box;
}
</style>
